<template>
  <div class="box">
    <div class="img_container">
      <div class="logo">
        <img src="@/assets/images/web_logo.png" alt="logo" />
      </div>
      <div class="banner">
        <img src="@/assets/images/disanfang1.jpg" alt="banner" />
      </div>
    </div>
    <div class="login_container">
      <van-form @submit="onSubmit">
        <van-field
          v-model="submitInfo.phone"
          name="账号"
          label="账号"
          placeholder="账号"
        />
        <van-field
          v-model="submitInfo.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
        />
        <div style="margin: 16px">
          <van-button round block color="#2bad37" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import doctorLoginApi from "@/api/login";
export default {
  name: "doctorLogin",
  data() {
    return {
      submitInfo: {
        phone: "",
        password: "",
        openId: "",
      },
    };
  },
  created() {
    // this.$Utils.getOpenid(this.$route.path)
    this.getCode();
  },
  methods: {
    getInit() {
      //查询openId是否存在 存在跳转查询表单 否则获取code 传给后端 返回openid保存 进行登录跳转页面
    },
    getUrlParam(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    getCode() {
      if (!localStorage.getItem("wxOpenid")) {
        var code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
        var local = window.location.href;
        // var local = "https://h5.kanglailab.com";
        var APPID = "wxe7229f039bfe873b";

        if (code == null || code === "") {
          window.location.href =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            APPID +
            "&redirect_uri=" +
            encodeURIComponent(local) +
            "&response_type=code&scope=snsapi_base&state=#wechat_redirect";
        } else {
          doctorLoginApi.getOpenId({ code }).then((res) => {
            this.submitInfo.openId = res.data;
            localStorage.setItem("wxOpenid", this.submitInfo.openId);
          });
        }
      } else {
        this.submitInfo.openId = localStorage.getItem("wxOpenid");
        // doctorLoginApi
        //   .login({
        //     openId: this.submitInfo.openId,
        //   })
        //   .then((res) => {
        //     if (res.status == 0) {
        //       this.$toast({
        //         type: "success",
        //         message: res.msg,
        //       });
        //       // setTimeout(() => {
        //       //   // localStorage.setItem("token", res.data.token);
        //       //   this.$router.push({ path: "/doctorReport/getReportList" });
        //       // }, 1000);
        //     }
        //   });
      }
    },
    onSubmit() {
      // if (!this.$Utils.verifyPhone(this.submitInfo.phone)) {
      //   this.$dialog.alert({
      //     title: "提示",
      //     message: "手机号格式不正确",
      //   });
      //   return;
      // }
      if (!this.submitInfo.phone) {
        this.$dialog.alert({
          title: "提示",
          message: "请输入账号",
        });
        return;
      }
      if (!this.submitInfo.password) {
        this.$dialog.alert({
          title: "提示",
          message: "请输入密码",
        });
        return;
      }
      doctorLoginApi
        .bindOpenid({
          loginName: this.submitInfo.phone,
          password: this.submitInfo.password,
          openId: this.submitInfo.openId,
        })
        .then((res) => {
          if (res.status == 0) {
            this.$toast({
              type: "success",
              message: res.msg,
            });
            setTimeout(() => {
              localStorage.setItem("token", res.data.token);
              this.$router.push({ path: "/doctorReport/getReportList" });
            }, 1000);
          } else {
            this.$toast({
              type: "fail",
              message: res.msg,
            });
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .img_container {
    width: 100vw;
    height: 300px;
    .banner {
      margin-top: 10px;
      img {
        width: 100%;
        height: 200px;
      }
    }
    .logo {
      img {
        width: 100px;
        padding: 10px 0 0 10px;
      }
    }
  }
  .login_container {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translateX(-50%);
    width: 90vw;
    height: 200px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 0 10px 10px #eee;
    .van-form {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
